<template>
<q-card v-if="memberList.length>0" flat square class="transparent q-py-sm q-px-md">
    <q-list class=" text-grey-5">

        <q-item v-for="(item,index) in memberList" :key="index" class="row items-center q-py-xs">
            <q-avatar size="25px" class="q-mr-sm">
                <img :src="item.avatar">
            </q-avatar>
            <q-item-section>
                <div class="text-caption row no-wrap items-center ">
                    {{item.username.length>=10?item.username.substring(0,9)+'……':item.username}}
                </div>
            </q-item-section>
            <q-item-section v-if="isEdit"  side right class="row">
                <div class="row text-grey-6 items-center non-selectable">
                    <span v-if="item.permission==5 && isPermission">创建者</span>
                    <span v-if="item.permission==4 && isPermission">管理员</span>
                    <span v-if="item.permission==3 && isPermission">可编辑</span>
                    <span v-if="item.permission==1 && isPermission">可查看</span>
                    <span v-if="!isPermission">操作</span>
                    <q-icon v-if="item.permission!=5" name="mdi-chevron-down">

                    </q-icon>
                    <q-menu v-if="item.permission!=5" auto-close content-class="bg-grey-9 text-white" anchor="bottom right" self="top right" :offset="[0,10]">

                        <q-item v-if="isPermission" clickable>
                            <q-item-section side left>
                                <q-icon :class="item.permission==4?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                            </q-item-section>

                            <q-item-section @click="handleChangePermission(item,4)">
                                <q-item-label>管理员</q-item-label>
                                <q-item-label class="text-grey-5" caption>可修改项目和设置权限</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-separator inset color="grey-6"></q-separator>
                        <q-item v-if="isPermission" clickable>
                            <q-item-section side left>
                                <q-icon :class="item.permission==3?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>
                            </q-item-section>

                            <q-item-section @click="handleChangePermission(item,3)">
                                <q-item-label>可编辑</q-item-label>
                                <q-item-label class="text-grey-5" caption>可编辑相关文件、分享项目</q-item-label>
                            </q-item-section>

                        </q-item>
                        <q-separator inset color="grey-6"></q-separator>

                        <q-item v-if="isPermission" clickable>
                            <q-item-section side left>
                                <q-icon :class="item.permission==1?'text-green-6 text-bold':'text-transparent'" class="q-mr-sm " name="mdi-check-outline"></q-icon>

                            </q-item-section>

                            <q-item-section @click="handleChangePermission(item,1)">
                                <q-item-label>可查看</q-item-label>
                                <q-item-label class="text-grey-5" caption>仅查看相关文件</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-separator inset color="grey-6"></q-separator>

                        <q-item clickable>
                            <q-item-section side left>
                                <q-icon class="q-mr-sm text-red-4 text-bold" name="mdi-account-remove-outline"></q-icon>
                            </q-item-section>

                            <q-item-section @click="handleRemoveMember(item)">
                                <q-item-label>移除成员</q-item-label>

                            </q-item-section>
                        </q-item>
                    </q-menu>
                </div>

            </q-item-section>
        </q-item>
    </q-list>

</q-card>
</template>

<script>
export default {
    name: 'MemberList',
    props: {
        memberList: {
            type: Array
        },
        isPermission:{
            default:true
        },
        isEdit:{
          default:true
        }

    },
    data() {
        return {}
    },
    methods: {
        handleChangePermission(v,permission) {
            this.$emit('update',v,permission)
        },
        handleRemoveMember(item){
            this.$emit('remove',item)
        }
    }
}
</script>
